<template>
  <section class="course-list-section">
    <a-form ref="formRef" :rules="formRules" :model="formState" v-bind="formItemLayout"  @finish="onFinish">
      <a-form-item label="课程类型" name="type">
        <a-radio-group v-model:value="formState.type">
          <template v-for="(item,index) in typeOptions" :key="index">
            <a-radio :value="item.value">{{ item.label }}</a-radio>
          </template>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="课程简介" name="desc">
        <a-textarea v-model:value="formState.desc" :rows="4" placeholder="输入课程简介"/>
      </a-form-item>
      <a-form-item label="开课时间" name="openingTime">
        <a-date-picker v-model:value="formState.openingTime" show-time placeholder="选择开课时间"></a-date-picker>
      </a-form-item>
      <a-form-item label="上传课程" v-if="formState.type==2" name="interlinkage">
        <a-form-item name="interlinkage" no-style>
          <a-upload-dragger v-model:fileList="formState.interlinkage" name="files" action="/upload.do">
            <p class="ant-upload-drag-icon">
              <InboxOutlined/>
            </p>
            <p class="ant-upload-text">点击上传课程</p>
            <p class="ant-upload-hint">请上传MP4格式得文件</p>
          </a-upload-dragger>
        </a-form-item>
      </a-form-item>
      <a-form-item name="cover" label="课程封面" extra="请上传课程封面，用于列表展示">
        <a-upload
            v-model:fileList="formState.cover"
            name="logo"
            action="/upload.do"
            list-type="picture">
          <a-button>
            <template #icon>
              <UploadOutlined/>
            </template>
            点击上传
          </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item label="所属班级" name="classId">
        <a-select v-model="formState.classId" placeholder="选择课程类型" :options="typeOptions">
        </a-select>
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="formState.status">
          <template v-for="(item,index) in statusOptions" :key="index">
            <a-radio :value="item.value">{{ item.label }}</a-radio>
          </template>
        </a-radio-group>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
        <a-button type="primary" html-type="submit">提交</a-button>
        <a-button style="margin: 0 8px" @click="()=>router.back()">返回</a-button>
      </a-form-item>
    </a-form>
  </section>
</template>
<script setup lang="ts">
import {computed, onMounted, reactive, ref} from "vue";
import type {Rule} from "ant-design-vue/es/form";
import type {FormInstance} from "ant-design-vue";
import {addCurriculum, curriculumList} from "@/api";
import {useRoute, useRouter} from "vue-router";
const router = useRouter();
const route=useRoute();
const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 14},
};
//表单数据
const formState = reactive({
  type: "0",
  desc: "",
  openingTime: "",
  interlinkage: [],
  cover: [],
  status: "1",
  classId: "",
  className: ""
})
//表单验证
const formRules: Record<string, Rule[]> = {}
//表单ref
const formRef = ref<FormInstance>()
const typeOptions = [
  {value: '0', label: '公开课程'},
  {value: '1', label: '录播课程'},
]
//课程状态
const statusOptions = [
  {value: '0', label: '下架'},
  {value: '1', label: '上架'}
]
/**
 * 提交
 * @param values
 */
const onFinish=(values:any)=>{
  console.log('Success:', values);
  const params={
    type: "0",
    name:"移动应用实践",
    desc: "此诗抓住诗人早晨刚醒时的一瞬间展开联想，描绘了一幅春天早晨绚丽的图景，抒发了诗人热爱春天、珍惜春光的美好心情。首句破题，写春睡的香甜，也流露着对朝阳明媚的喜爱；次句即景，写悦耳的春声，也交代了醒来的原因",
    openingTime: "2023-04-01 13:30:00",
    interlinkage: "blob:https://haokan.baidu.com/29e7505a-44e3-485a-9be8-655f0b56c37b",
    cover: "https://www.bupt.edu.cn/images/cover/tszy.png",
    status: "1",
    classId: "1",
    className: "2023计算机一年级一班"
  }
  addCurriculum(params).then((res)=>{
    console.log("添加课程",res.data)
    // router.back()
  })
}
/**
 * 获取课程详情
 */
const getCurriculum = (id:number|string) => {
  console.log("getCurriculum=====id",id)
  curriculumList({id}).then((res)=>{
    console.log("curriculumList",res.data)
  })
}
onMounted(()=>{
  if (route.query.id){
    const id:string|number=route.query.id as string
    console.log("onMounted=====id",id)
    getCurriculum(id);
  }

})
</script>
<style scoped lang="less">
.course-list-section {
  position: relative;
  padding: 20px;
  background: #fff;
  margin: 10px;
  border-radius: 10px;
}

.teacher-info-top {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 140px;

  .teacher-info-top-bg {
    width: 100%;
    height: 100%;
    filter: blur(60px);
    position: absolute;
    z-index: 50;
  }

  .teacher-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #fff;
    position: relative;
    z-index: 100;
  }

  .desc {
    margin-left: 20px;

    .name {
      font-size: 18px;
      position: relative;
      box-sizing: border-box;
      color: white;
      z-index: 100;
    }

    .level {
      position: relative;
      z-index: 100;
      font-size: 14px;
      color: white;
    }
  }
}

.container {
  width: 1160px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 50px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
}
</style>
